<template>
  <div>
    <div class="spawerbox container-fluid" style="padding: 0">
      <div class="overbox d-flex" ref="overbox">
        <img
        style="max-width: none !important;"
          class="col-3 col-sm-1 col-md-1 col-lg-1 col-xl-3"
          v-for="(item, index) in spawerlist"
          :key="index"
          :src="item.imgUrl"
        />
      </div>
      <!-- 定位 -->
      <div class="leftarrows" @click="leftarrows"><</div>
      <div class="rightarrows" @click="rightarrows">></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
let spawerlist = ref([
  {
    id: 1,
    imgUrl: "https://www.wzxfpx.com/wp-content/uploads/2023/05/banner2.png",
  },
  {
    id: 2,
    imgUrl:
      "https://www.wzxfpx.com/wp-content/uploads/2023/05/wKj2K2LwnWeAIyMEAAL23WV6WI4118.png",
  },
  {
    id: 3,
    imgUrl:
      "https://www.wzxfpx.com/wp-content/uploads/2023/05/wKj2K2LwhHKAAWd-AAfY3eF3sEs212.png",
  },
]);
let overbox = ref();
let pxnum = ref(0);
let pxnumsmall = ref(0);
function leftarrows() {
  var widthsize = window.innerWidth;
  if (pxnum.value != 0 && (widthsize >= 1200 || widthsize <= 330)) {
    // 580 1200
    pxnum.value = pxnum.value + 25;
    overbox.value.style.transform = `translateX(${pxnum.value}%)`;
  } else if (pxnumsmall.value != 0 && widthsize <= 580) {
    pxnumsmall.value = pxnumsmall.value + 14;
    overbox.value.style.transform = `translateX(${pxnumsmall.value}%)`;
  }
}
function rightarrows() {
  var widthsize = window.innerWidth;
  if (pxnum.value != -50 && (widthsize >= 1200 || widthsize <= 330)) {
    pxnum.value = pxnum.value - 25;
    overbox.value.style.transform = `translateX(${pxnum.value}%)`;
  } else if (pxnumsmall.value != -14 && widthsize <= 580) {
    pxnumsmall.value = pxnumsmall.value - 14;
    overbox.value.style.transform = `translateX(${pxnumsmall.value}%)`;
  }
}


</script>

<style scoped lang="scss">
.spawerbox {
  width: 100vw;
  overflow: hidden;
  position: relative;
  .overbox {
    width: 400vw;
    height: 100%;
    transition: all 1s;
  }
  img {
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 20.625rem) and (max-width: 36.25rem) {
  .spawerbox img {
    width: 13%;
    height: 50%;
  }
}
.leftarrows {
  cursor: pointer;
  font-size: 6.25rem;
  color: #007aff;
  position: absolute;
  left: 0rem;
  top: 50%;
  transform: translateY(-50%);
  background-size: cover;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D…2L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
}
.rightarrows {
  cursor: pointer;
  font-size: 6.25rem;
  color: #007aff;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  background-size: cover;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D…L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
}
</style>
